
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1 {
				padding: 0 4rem;
			}

			.Scroll_Wrapper {
				width: 100%;
				white-space: nowrap; /* 为了把所有内容都保持在一行 */
				overflow-x: auto;  /* 如果溢出框，则应该提供滚动机制 */
				overflow-y: hidden; /* 裁剪内容 - 不提供滚动机制 */
			}

			.Item {
				display: inline-flex;/* 将对象作为内联块级弹性伸缩盒显示 */
				/* border: solid aqua; */
				/* position: relative; */
			}
			
			.Item img {
				max-height: 7.25rem;
			}
			.Caption {
				max-width:100%;
				padding-left: .5rem;
				font-size: 1rem;
				line-height: 1.2;
				/* border: solid red; */
				white-space: normal;
				
			}
			
			
		</style>

	</head>
	<body>
		<h1>Top grossing films of 2014</h1>
		<nav class="Scroll_Wrapper">
			<figure class="Item">
				<img src="img/f1.jpg" alt="Guardians of the Galaxy" />
				<figcaption class="Caption">Guardians of the Galaxy</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f2.jpg" alt="The Hunger Games: Mockingjay - Part 1" />
				<figcaption class="Caption">The Hunger Games: Mockingjay - Part 1</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f3.jpg" alt="Captain America: The Winter Soldier" />
				<figcaption class="Caption">Captain America: The Winter Soldier</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f4.jpg" alt="The Lego Movie" />
				<figcaption class="Caption">The Lego Movie</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f5.jpg" alt="Transformers: Age of Extinction" />
				<figcaption class="Caption">Transformers: Age of Extinction</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f6.jpg" alt="Maleficent" />
				<figcaption class="Caption">Maleficent</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f7.jpg" alt="X-Men: Days of Future Past" />
				<figcaption class="Caption">X-Men: Days of Future Past</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f8.jpg" alt="The Hobbit: The Battle of the Five Armies" />
				<figcaption class="Caption">The Hobbit: The Battle of the Five Armies</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f9.jpg" alt="Big Hero 6" />
				<figcaption class="Caption">Big Hero 6</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="img/f10.jpg" alt="Dawn of the Planet of the Apes" />
				<figcaption class="Caption">Dawn of the Planet of the Apes</figcaption>
			</figure>
		</nav>
	</body>
</html>
